
<div id="rangeSlider">
    <table class="rangeSliderTable">
        <tr>
            <th>
                <input id="rangePriceCheckbox" type="checkbox" title="вкл/выкл" checked="checked" onchange="rangeSliderPriceToggle()" />
                <label for="rangePriceCheckbox">Стоимость,<span class="summary_price_color"><?php echo format_currency_label() ?></span>:</label>
            </th>
            <td>
                <input type="text" readonly="readonly" id="rangePrice" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="rangeSliderPrice"></div>
            </td>
        </tr>
        <tr><td colspan="2">&nbsp;</td></tr>
        <tr>
            <th>
                <input id="rangeRoomsCheckbox" type="checkbox" title="вкл/выкл" checked="checked" onchange="rangeSliderRoomsToggle()" />
                <label for="rangeRoomsCheckbox">Комнат:</label>
            </th>
            <td>
                <input type="text" readonly="readonly" id="rangeRooms" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="rangeSliderRooms"></div>
            </td>
        </tr>
        <tr><td colspan="2">&nbsp;</td></tr>
        <tr>
            <th>
                <input id="rangeSeaCheckbox" type="checkbox" title="вкл/выкл" checked="checked" onchange="rangeSliderSeaToggle()" />
                <label for="rangeSeaCheckbox">Расст. до моря:</label>
            </th>
            <td>
                <input type="text" readonly="readonly" id="rangeSea" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="rangeSliderSea"></div>
            </td>
        </tr>
    </table>
</div>

<script language="javascript" type="text/javascript">

    var cost;
    var rooms;
    var destToSea;

    $(function() {
        $('#rangeSliderPrice').slider({
            range: true,
            values: [ <?php echo implode( ",", format_currency( sfConfig::get( 'app_slider_price_values' ) ) ) ?> ],
            min: <?php echo format_currency( sfConfig::get( 'app_slider_price_min' ) ) ?>,
            max: <?php echo format_currency( sfConfig::get( 'app_slider_price_max' ) ) ?>,
            step: <?php echo format_currency( sfConfig::get( 'app_slider_price_step' ) ) ?>,
            slide: function(event, ui) {
                $("#rangePrice").val( ui.values[0] + ' - ' + ui.values[1] );
                cost = ui.values;
            }
        });
        $("#rangePrice").val( $("#rangeSliderPrice").slider("values", 0) + ' - ' + $("#rangeSliderPrice").slider("values", 1) );
        rangeSliderPriceToggle();

        $('#rangeSliderRooms').slider({
            value: 2,
            min: 1,
            max: 5,
            step: 1,
            slide: function(event, ui) {
                $("#rangeRooms").val(ui.value);
                rooms = ui.value;
            }
        });
        $("#rangeRooms").val( $("#rangeSliderRooms").slider("value") );
        rangeSliderRoomsToggle();

        $('#rangeSliderSea').slider({
            value: 300,
            min: 100,
            max: 1500,
            step: 100,
            slide: function(event, ui) {
                $("#rangeSea").val('до ' + ui.value + ' м.');
                destToSea = ui.value;
            }
        });
        $("#rangeSea").val( 'до ' + $("#rangeSliderSea").slider("value") + ' м.' );
        rangeSliderSeaToggle();
    });

    function rangeSliderPriceToggle()
    {
        if ( $('#rangePriceCheckbox').is(':checked') )
        {
            $("#rangeSliderPrice").slider('enable');
            $("#rangePrice").removeAttr('disabled');
            cost = $("#rangeSliderPrice").slider("values");
        }
        else
        {
            $("#rangeSliderPrice").slider('disable');
            $("#rangePrice").attr( 'disabled', "disabled" );
            cost = [];
        }
    }

    function rangeSliderRoomsToggle()
    {
        if ( $('#rangeRoomsCheckbox').is(':checked') )
        {
            $("#rangeSliderRooms").slider('enable');
            $("#rangeRooms").removeAttr('disabled');
            rooms = $("#rangeSliderRooms").slider("value");
        }
        else
        {
            $("#rangeSliderRooms").slider('disable');
            $("#rangeRooms").attr( 'disabled', "disabled" );
            rooms = 0;
        }
    }

    function rangeSliderSeaToggle()
    {
        if ( $('#rangeSeaCheckbox').is(':checked') )
        {
            $("#rangeSliderSea").slider('enable');
            $("#rangeSea").removeAttr('disabled');
            destToSea = $("#rangeSliderSea").slider("value");
        }
        else
        {
            $("#rangeSliderSea").slider('disable');
            $("#rangeSea").attr( 'disabled', "disabled" );
            destToSea = 0;
        }
    }

</script>
